<script setup>
import {ref, watch} from "vue";
import {ElMessage} from "element-plus";


const TreeData = ref([])
const props = defineProps({
  dialogTitle: {
    type: String,
    default: '',
    required: true
  },
  dialogVisible: {
    type: Boolean,
    default: false,
    required: true
  },
  tableData: {
    type: Array,
    default: () => [],
    required: true
  },
})

const form = ref({
  id: '',
})

const rules = ref({
      id: [
        {required: true, message: '请选择分组'}
      ],
    }
)

const formRef = ref(null)
const uploadRef = ref(null);

const uploadUrl = ref(`${process.env.VUE_APP_BASE_API}/host/host/batch/import`)
const uploadData = ref({})
const handleSuccess = (response, file, fileList) => {
  uploadRef.value.clearFiles();
  // 根据你的后端返回结构调整
  if (response.code === 200) {
    // 手动清空已上传的文件
    ElMessage.success('文件上传成功');
    // 这里可以添加成功后的逻辑，比如刷新数据等
    formRef.value.resetFields()
    handleClose()
    emits('initTreeData')
    emits('initTableData')
  } else {
    ElMessage.error(response.msg);
  }
};

const handleError = (error, file, fileList) => {
  // 500 错误会触发这里
  console.error('上传错误:', error);
  ElMessage.error('批量导入失败');
};

watch(
    () => props.dialogVisible,
    () => {
      TreeData.value = JSON.parse(JSON.stringify(props.tableData)); //深拷贝，数据不互相影响
    }
)

watch(
    () => form.value.id,
    () => {
      uploadData.value = {
        id: form.value.id
      }
    }
)
const emits = defineEmits(['update:modelValue', 'initTreeData', 'initTableData'])

const handleClose = () => {
  form.value.id = ''
  emits('update:modelValue', false)
}
</script>

<template>
  <el-dialog
      model-value="dialogVisible"
      :title="dialogTitle"
      style="padding: 40px"
      class="clearfix"
      width="500px"
      @close="handleClose"
      :close-on-click-modal="false"
  >
    <el-form
        ref="formRef"
        :model="form"
        :rules="rules"
        label-width="0"
    >
      <el-form-item prop="parent_id">
        <el-select v-model="form.id" placeholder="请选择分组">
          <template v-for="item in TreeData" :key="item.id">
            <el-option :label="item.name" :value="item.id"></el-option>
            <template v-for="child in item.children" :key="child.id">
              <el-option :label="child.name" :value="child.id">
                <span>&nbsp;&nbsp;&nbsp;&nbsp;{{ '- ' + child.name }}</span>
              </el-option>
            </template>
          </template>
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-upload
          :data="uploadData"
          name="files"
          ref="uploadRef"
          :action="uploadUrl"
          :limit="1"
          :show-file-list="false"
          :on-success="handleSuccess"
          :on-error="handleError"
          style="display: inline-block;margin-right: 10px"
      >
        <el-button type="primary">上传表格</el-button>
      </el-upload>
      <el-button @click="handleClose">取消</el-button>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss">

</style>